<template>
<div>
    <div>
      <van-nav-bar title="个人信息" left-arrow  @click-left="onClickLeft" right-text="修改"  @click-right="reset"/> 
    </div>
    <div v-show="showMsg">
    <van-cell-group>
        <van-cell title="用户名" >{{uN}}</van-cell>
        <van-cell title="昵称" >{{name}}</van-cell>
        <van-cell title="学号" >{{stuID}}</van-cell>
        <van-cell title="手机" >{{phone}}</van-cell>
        <van-cell title="身份证" >{{IDcard}}</van-cell>
    </van-cell-group>
    </div>
    <div v-show="!showMsg">
        <van-cell-group>
        <van-field
            v-model="uN"
            label="用户名"
            error
            disabled
            required
        />
        <van-field
            id="name"
            v-model="name"
            label="昵称"
            placeholder="请输入昵称"
            error-message=""
            required
        />
        <van-field
            id="stuID"
            v-model="stuID"
            label="学号"
            placeholder="请输入学号"
            error-message=""
            required
        />
        <van-field
            id="phone"
            v-model="phone"
            label="手机"
            placeholder="请输入手机号码"
            error-message=""
            required
        />
        <van-field
            id="IDcard"
            v-model="IDcard"
            label="身份证"
            placeholder="请输入身份证号码"
            error-message=""
            required
        />
        </van-cell-group>
    </div>
</div>
</template>
<script>
import { Toast } from 'vant';
import axios from "axios";
export default {
data() {
    return {
        showMsg:true,
        name:'',
        stuID:'',
        phone:'',
        IDcard:'',
        uName : ''
    }
  },
  mounted:function(){
      axios({
            method: "post",
            url: "http://localhost:3000/getUserMsg",
            data: {
            uName: this.uN,
            },
            headers: {
            "Content-Type": "text/plain"
            }
        }).then(result => {
             console.log(result);
             this.name = result.data[0].name;
             this.stuID = result.data[0].stuID;
             this.phone = result.data[0].phoneNum;
             this.IDcard = result.data[0].IDcard
        })
  },
  computed:{
        uN(){
            return this.$store.state.uN
        },
    },
   methods: {
    //返回
    onClickLeft() {
      this.$router.go(-1)
    },
    //修改资料
    reset(){
        if(this.showMsg == true){
            this.showMsg = false;
        }else if(!(/^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$/.test(this.name))){
            Toast.fail('昵称不能有符号');
        }else if(!(/^\d{10}$/.test(this.stuID))){
            Toast.fail('学号必须是数字');
        }else if(!(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(this.phone))){
            Toast.fail('手机号码有误');
        }else if(!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.IDcard)){
            Toast.fail('身份证号码有误');
        }else{
                axios({
                method: "post",
                url: "http://localhost:3000/ResetUser",
                data: {
                uName: this.uN,
                name: this.name,
                stuID: this.stuID,
                phoneNum: this.phone,
                IDcard: this.IDcard
                },
                headers: {
                "Content-Type": "text/plain"
                }
            }).then(result => {
                console.log(result);
                this.$store.commit('login');
                Toast.success('修改成功');
                this.showMsg = true;
            })
        } 
    }
  }  
}
</script>
<style>

</style>
